// 自定义通用的compostion api 
import { useIntersectionObserver, useIntervalFn } from "@vueuse/core";
import { onUnmounted, ref } from "vue";
// 封装 懒加载的api

export function useLazyData(apiFn: () => void) {
  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // 已经进入到可视区了...
      // 处理业务...
      apiFn()
      stop() // 停止监听
    }
  }, {
    // 触发方法的阈值 - 0 
    // 目的: 更早的去发送请求, 获取数据
    threshold: 0
  })
  return target
}

// 封装倒计时功能
export function useCountDown(count: number = 60) {
  const time = ref(0)
  // pause 暂停
  // resume 继续
  // isActive 是否正在进行
  const { pause, resume } = useIntervalFn(() => {
    time.value--
    if (time.value === 0) {
      pause()
    }

  }, 1000, {
    immediate: false
  })
  // 开启倒计时
  const start = () => {
    time.value = count 
    resume()
  } 

  // 组件卸载时， 将定时器清除掉
  onUnmounted(() => {
    pause()
  })

  return {
    time,
    start
  }

}